<template>
    <div class="list">
        <!-- 分类 -->
        <div class="cats">
            <!-- 一级导航 eg:部位-->
            <div class="nav font42">
                <ul>
                    <li v-for="(cat,index) in cats" :class="index==activeNav1Index?'active':''">
                        <div>
                            <span @click="updateNav(index)">{{ cat.name }}</span>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 白线 -->
            <div class="linelb4">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <!-- 二级导航 -->
            <div class="nav2 font42">
                <!-- 二级颜色导航 -->
                <div class="colorNav" v-if="hasColorNav">
                    <div class="imgColor"><img src="" alt=""></div>
                    <div class="imgColor"><img src="" alt=""></div>
                    <div class="imgColor"><img src="" alt=""></div>
                    <div class="imgColor"><img src="" alt=""></div>
                    <div class="imgColor"><img src="" alt=""></div>
                </div>
                <!-- 二级菜单导航 eg:唇膏 唇彩-->
                <div class="nav22">
                    <ul :class="hasColorNav?'contNav':''">
                        <li v-for="(nav2,index) in sub_cats" :class="index==activeNav2Index?'bg-active':''" @click="updataList(index,nav2.value[0])">
                            <span>
                                {{ nav2.name }}
                            </span>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 分类页所有商品列表 -->
            <div class="goodsList font30">
                <ul>
                    <li v-for="(good,index) in curItems" class="goodItem">
                        <div class="media-box">
                            <router-link :to="{ path: '/details/'+good.num_iid, params: { cid: good.num_iid }}"><img :src="good.item_imgs.split(';')[0]" alt="">
                        </router-link>
                        <div class="title title1">{{ decodeURIComponent(good.title) }}</div>
                        <div class="title title2"></div>
                        <div class="box ">
                            <span class="price">￥{{ good.price }} </span>
                            <span class="count">xl{{good.period_sold_quantity}}</span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 右侧热卖区域 -->
    <div class="rightArea">
        <div class="nav font42">
            <div>当前热卖</div>
        </div>
        <div class="linelb1"></div>
        <div class="goodsList font30">
            <div class="media-box" v-for="(good,index) in hotItems">
                <router-link :to="{ path: '/details/'+good.num_iid, params: { cid: good.num_iid }}"><img :src="good.item_imgs.split(';')[0]" alt="">
            </router-link>
            <div class="title title1">{{ decodeURIComponent(good.title) }}</div>
            <div class="title title2"></div>
            <div class="box ">
                <span class="price">￥{{ good.price }} </span>
                <span class="count">xl{{good.period_sold_quantity}}</span>
            </div>
        </div>
    </div>
</div>
</div>
</template>
<script>
import { fetchData } from '../common/js/ajax.js'
export default {
    name: 'list',
    data() {
        return {
            cats: "", //获得json数据  所有分类信息
            sub_cats: "", //二级分类信息
            // itemsArr: "",
            hasColorNav: false,
            curItems: [],
            activeNav1Index: 0,
            activeNav2Index: 0,
            itemsObj: '',
            hotItems: [], //热卖产品集合
            hotOrMatch: 'hot',
            hotCount: 10
        }
    },
    mounted() {
        this.init();
    },
    activated(){
        // alert(111);
        // alert(11221);
        // this.init();
    },
    props: {},
    methods: {
        init: function() {
            var _that = this;
            //        初始化一级菜单
            fetchData(mac.getCats, "", function(msg) {
                _that.cats = msg.data;
                _that.updateNav(0);
            });
            //         获得所有商品
            fetchData(mac.getItems, '', function(msg) {
                _that.$root.itemsArr = msg.data.list;
                _that.updataList(0, 0);
                _that.hotItems = _that.$root.itemsArr;
                _that.hotItems.sort(_that.compare('period_sold_quantity'));
                _that.hotItems.splice(_that.hotCount, _that.hotItems.length - _that.hotCount);
                console.log(_that.hotItems);
            });
        },
        compare: function(property) {
            return function(a, b) {
                var value1 = a[property];
                var value2 = b[property];
                return value2 - value1;
            }
        },
        updateNav: function(index) {
            var cats = this.cats;
            this.sub_cats = cats[index].sub_cats;
            this.hasColorNav = cats[index].hasColorNav;
            this.activeNav1Index = index;
        },
        updataList: function(index, catID) {
            this.activeNav2Index = index;
            this.curItems = [];
            var _that = this;
            $(this.$root.itemsArr).each(function(key, item) {
                if (item.seller_cids == catID) {
                    _that.curItems.push(item);
                }
            });
        }
    }
}
</script>
<style scoped>
    .cats {
        width: 23rem;
        height: 15.65rem;
        float: left;
    }
    .nav {
        height: 0.42rem;
    }
    .nav li {
        float: left;
        width: 5.75rem;
        margin-left: -0.02rem;
    }
    .linelb4 {
        height: 0.37rem;
        margin: 0.25rem 0 0 0;
    }
    .linelb4 div {
        float: left;
        width: 5.75rem;
        box-sizing: border-box;
        height: 0.37rem;
        border-left: 0.04rem solid white;
        border-bottom: 0.04rem solid white;
    }
    .contNav {
        float: right;
    }
    .colorNav {
        float: left;
    }
    .nav2 {
        height: 0.9rem;
        margin-top: 0.63rem;
    }
    .nav2 .colorNav .imgColor {
        height: 1rem;
        width: 1rem;
        padding: 0;
        box-sizing: content-box;
        margin-right: 0.59rem;
        display: inline-block;
        border: 0.04rem solid white;
    }
    .nav2 li {
        display: inline-block;
        height: 0.9rem;
        padding: 0 0.40rem;
        box-sizing: border-box;
        line-height: 0.82rem;
        border: 0.04rem solid white;
        margin-right: 0.7rem;
    }
    .goodsList {
        height: 11.9rem;
        margin-top: 1.16rem;
        width: 22.56rem;
        overflow: scroll;
    }
    .goodsList li {
        width: 3.2rem;
        height: 6.4rem;
        position: relative;
        display: inline-block;
        margin-left: 1.64rem;
        /*background-color: red;*/
    }
    .goodsList li:nth-child(5n+1) {
        margin-left: 0;
    }
</style>